<template>
  <van-overlay class-name="version-info-overlay" :show="visible" :z-index="100">
    <div class="version-info-wrapper" @click.stop>
      <div class="bg">
        <span class="title">发现新版本</span>
      </div>
      <div class="version-info">
        <div class="info-title" style="margin-bottom: 8px">最新版本：{{ versionInfo.version }}</div>
        <div style="line-height: 18px">
          <div class="info-title">更新内容：</div>
          <div class="info-content" v-html="updateLog"></div>
        </div>
      </div>
      <div class="footer-btn">
        <van-button @click="emit('close')" v-if="!force">下次再说</van-button>
        <van-button type="primary" @click="downloadUpdate">立即更新</van-button>
      </div>
    </div>
  </van-overlay>
</template>

<script lang="ts" setup>
import { defineEmits, computed } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  versionInfo: {
    type: Object,
    default: () => ({})
  },
  force: {
    type: Boolean,
    default: true
  }
})

const updateLog = computed(() => {
  const log = props.versionInfo.log || ''
  return log.replace(/\n/g, '<br />')
})

const emit = defineEmits(['close'])

// 下载更新
const downloadUpdate = () => {
  const appUrl = props.versionInfo.url
  console.log(props.versionInfo)
  plus.runtime.openURL(appUrl)
  // plus.nativeUI.showWaiting('下载更新文件...')
  // plus.downloader.createDownload(appUrl, {
  //   filename: '_doc/update/'
  // }, function(d: any, status: number) {
  //   if (status == 200) {
  //     installApk(d.filename)
  //   }
  // }).start()
}

// // 安装更新
// const installApk = (path: string) => {
//   plus.nativeUI.showWaiting('安装更新文件...')
//   plus.runtime.install(path, {}, function() {
//     plus.nativeUI.closeWaiting()
//     plus.nativeUI.alert('应用资源更新完成！', function() {
//       plus.runtime.restart() // 重启应用
//     })
//   }, function(e: any) {
//     plus.nativeUI.closeWaiting()
//     console.error('安装更新文件失败[' + e.code + ']：' + e.message)
//     plus.nativeUI.alert('安装更新文件失败[' + e.code + ']：' + e.message)
//     // if (e.code == 10) {
//     //   alert('请清除临时目录')
//     // }
//   })
// }
</script>

<style lang="less">
.version-info-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  .version-info-wrapper {
    width: 294.87px;
    height: 333.33px;
    background: #ffffff;
    border-radius: 6.41px;
    .bg {
      width: 100%;
      height: 149.04px;
      background: url('@/assets/my/new-version-bg.svg') no-repeat;
      background-size: 100% 100%;
      position: relative;
      .title {
        position: absolute;
        top: 32.7px;
        left: 36.22px;
        color: #ffffff;
        font-size: 21.15px;
        font-weight: bold;
      }
    }
    .version-info {
      height: 124px;
      overflow-y: auto;
      position: relative;
      margin-top: -8px;
      padding: 0 26.93px;
      font-size: 11.54px;
      .info-title {
        font-weight: 700;
        color: #444444;
      }
      .info-content {
        color: #888888;
      }
    }
    .footer-btn {
      margin-top: 12px;
      padding: 0 12px;
      display: flex;
      .van-button {
        flex: 1;
        font-size: 16px;
        &:not(:first-child) {
          margin-left: 12px;
        }
      }
    }
  }
}
</style>
